import * as React from "react";
import { Row, Col, Modal, Button } from "antd";
import jsPDF from "jspdf";
import html2canvas from "html2canvas";
import { AjaxData } from "../../../../data/interface/publicInterface";
import BuildMessage, { EnergyReportData } from "./compontents/BuildMessage";
import EnergyAnalysis from "./compontents/EnergyAnalysis";
import SubItemAnalysis from "./compontents/SubItemAnalysis";
import DepartmentAnalysis from "./compontents/DepartmentAnalysis";
import { energyReport } from "../ServeApi";
import TimeSharingPower from "./compontents/TimeSharingPower";
import fengmianlogo from "../../../../assets/img/fengmianlogo.png";
import moment from "moment";
import "./index.less";

export interface EnergyAnalysisReportProps {}

export interface EnergyAnalysisReportState {
  time: number;
  timeType: number;
  name: string;
}

class EnergyAnalysisReport extends React.Component<
  EnergyAnalysisReportProps,
  EnergyAnalysisReportState
> {
  private OPdf: any = null;
  private dataSouce: any = null;
  state = {
    timeType: 2,
    time: 0,
    name: "",
  };

  render() {
    return (
      <div className="EnergyAnalysisReport">
        <Row>
          <Col
            id="fdsgafsdhfdhsgfh"
            span={6}
            style={{ paddingRight: 12, position: "relative" }}
          >
            <BuildMessage
              onSubmit={(data: EnergyReportData) => {
                this.getEnergyReport(data);
              }}
            />
          </Col>
          <Col span={18}>
            {this.dataSouce ? (
              <div
                className="bare_body"
                id="demo"
                ref={(el) => {
                  this.OPdf = el;
                }}
                style={{ paddingTop: 30 }}
              >
                <div className="fengmian">
                  <img
                    className="fengmianlogo"
                    alt="公司logo"
                    src={fengmianlogo}
                  />
                  <div className="fengmianbody">
                    <h1>能耗分析报告</h1>
                    <strong>{this.state.name}</strong>
                    <p>
                      {this.FormatDate(this.state.timeType, this.state.time)}
                    </p>
                  </div>
                </div>
                <EnergyAnalysis
                  timeType={this.state.timeType}
                  time={this.state.time}
                  dataSouce={this.dataSouce}
                />
                <TimeSharingPower
                  timeType={this.state.timeType}
                  time={this.state.time}
                  dataSouce={this.dataSouce}
                />
                <SubItemAnalysis
                  timeType={this.state.timeType}
                  time={this.state.time}
                  dataSouce={this.dataSouce}
                />
                <DepartmentAnalysis
                  timeType={this.state.timeType}
                  time={this.state.time}
                  dataSouce={this.dataSouce}
                />
              </div>
            ) : null}
          </Col>
        </Row>
        {this.dataSouce ? (
          <div
            className="down"
            onClick={() => {
              this.download();
            }}
          >
            <Button type="primary">下载</Button>
          </div>
        ) : null}
      </div>
    );
  }
  //格式化时间
  FormatDate(type: number, time: number) {
    let dataTime: string = "";
    switch (type) {
      case 2:
        dataTime = moment(time).format("YYYY年MM月DD日");

        break;
      case 3:
        dataTime = moment(time).format("YYYY年MM月");
        break;
      case 4:
        dataTime = moment(time).format("YYYY年");

        break;
      default:
        break;
    }
    return dataTime;
  }
  /**请求部分 */
  //报告数据
  async getEnergyReport(pream: EnergyReportData) {
    let _this = this;
    try {
      let res: any = await energyReport(
        JSON.stringify(pream)
      ).catch((err) => {});
      let json: AjaxData = res;
      if (json.success) {
        this.dataSouce = json.data;
        this.setState({
          time: pream.time,
          timeType: pream.timeType,
          name: pream.name,
        });
        _this.forceUpdate();
      } else {
        Modal.error({
          title: json.message,
          onOk: () => {},
        });
      }
    } catch (error) {
      Modal.error({
        title: "初始化程序失败，无法读取数据，请刷新页面。",
        onOk: () => {},
      });
      console.error(error);
    }
  }

  //下载生成pdf
  download() {
    var element = this.OPdf; // 这个dom元素是要导出pdf的div容器
    var w = element.offsetWidth; // 获得该容器的宽
    var h = element.offsetHeight; // 获得该容器的高
    var offsetTop = element.offsetTop; // 获得该容器到文档顶部的距离
    var offsetLeft = element.offsetLeft; // 获得该容器到文档最左的距离
    var canvas = document.createElement("canvas");
    var abs = 0;
    var win_i = document.body.clientWidth; // 获得当前可视窗口的宽度（不包含滚动条）
    var win_o = window.innerWidth; // 获得当前窗口的宽度（包含滚动条）
    if (win_o > win_i) {
      abs = (win_o - win_i) / 2; // 获得滚动条长度的一半
    }
    canvas.width = w * 2; // 将画布宽&&高放大两倍
    canvas.height = h * 2;
    var context: any = canvas.getContext("2d");
    context.scale(2, 2);
    context.translate(-offsetLeft - abs, -offsetTop);

    html2canvas(element, {
      allowTaint: true,
      scale: 2, // 提升画面质量，但是会增加文件大小
    }).then(function (canvas) {
      var contentWidth = canvas.width;
      var contentHeight = canvas.height;
      //一页pdf显示html页面生成的canvas高度;
      var pageHeight = (contentWidth / 592.28) * 841.89;
      //未生成pdf的html页面高度
      var leftHeight = contentHeight;
      //页面偏移
      var position = 0;
      //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
      var imgWidth = 595.28;
      var imgHeight = (592.28 / contentWidth) * contentHeight;

      var pageData = canvas.toDataURL("image/jpeg", 1.0);

      let pdf = new jsPDF(undefined, "pt", "a4");

      //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
      //当内容未超过pdf一页显示的范围，无需分页
      if (leftHeight < pageHeight) {
        pdf.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
      } else {
        // 分页
        while (leftHeight > 0) {
          pdf.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
          leftHeight -= pageHeight;
          position -= 841.89;
          //避免添加空白页
          if (leftHeight > 0) {
            pdf.addPage();
          }
        }
      }
      pdf.save("用能分析报告.pdf");
    });
  }
}

export default EnergyAnalysisReport;
